<!--  -->
<template>
  <div class="index">
    <div class="wrap">
      <header>
        <div class="weather flex middle">
          <img :src="imgSrc" alt="" class="ico" />
          <span class="l ml10">{{ weatcherData.tem }}°C</span>
          <span class="l ml10">{{ weatcherData.wea }}</span>
        </div>
        <h2>可视化大屏</h2>
        <div class="showTime flex middle">
          <span class="max mr20">{{ nowTime }}</span>
          <li class="date cell-main">
            <div class="l">{{ week }}</div>
            <div class="xl">{{ date }}</div>
          </li>
        </div>
      </header>
      <section class="main flex">
        <div class="part  ">
          <div class="part-card">
            <h3 class="part-title xxl">
              业务范围
            </h3>
            <horizontalBar :height="260" :chartData="business" />
          </div>
          <div class="part-card">
            <h3 class="part-title xxl">
              人才队伍
            </h3>
            <pie :height="260" :chartData="persons" />
          </div>
          <div class="part-card">
            <h3 class="part-title xxl">
              营收状况
            </h3>
            <curLine :height="260" :chartData="incomes" />
          </div>
        </div>

        <div class="index-center cell-main col-white ml30 mr30">
          <div class="index-top">
            <div class="index-head flex middle">
              <li class="index-headitem cell-main">
                <countTo :startVal="startVal" :endVal="450" :duration="6000" />
              </li>
              <li class="index-headitem cell-main">
                <countTo :startVal="startVal" :endVal="680" :duration="6000" />
              </li>
              <li class="index-headitem cell-main">
                <countTo :startVal="startVal" :endVal="970" :duration="6000" />
              </li>
            </div>
            <div class="flex middle tcenter">
              <div class="index-name cell-main">公司总人数（单位：人）</div>
              <div class="index-name cell-main">技术人员占比（单位：%）</div>
              <div class="index-name cell-main">产品投资额（单位：万元）</div>
            </div>
          </div>

          <assetsMap :mapData="mapData" />
        </div>
        <div class="part ">
          <div class="part-card">
            <h3 class="part-title xxl">
              产品热词
            </h3>
            <cloudWord :height="260" :chartData="words" />
          </div>
          <div class="part-card">
            <h3 class="part-title xxl">
              客户分布
            </h3>
            <blockPie :height="260" :chartData="persons" />
          </div>
          <div class="part-card">
            <h3 class="part-title xxl">
              发展历程
            </h3>
            <devHistory :times="times" :contents="contents" />
          </div>
        </div>
      </section>
    </div>
  </div>
</template>

<script>
import countTo from 'vue-count-to'
import './index.scss'
import { dateFormat } from '../utils/index'
import horizontalBar from './components/horizontalBar'
import pie from './components/pie'
import curLine from './components/curLine'
import cloudWord from './components/cloudWord'
import blockPie from './components/blockPie'
import devHistory from './components/history'
import assetsMap from './components/assetsMap'
export default {
  data() {
    return {
      nowTime: '',
      week: '',
      date: '',
      timer: null,
      imgSrc: '',
      data: {},
      weatcherData: {},
      startVal: 0,
      persons: [
        {
          name: '博士',
          value: 5
        },
        {
          name: '硕士',
          value: 10
        },
        {
          name: '本科',
          value: 10
        },
        {
          name: '专科',
          value: 10
        },
        {
          name: '国防科大',
          value: 5
        },
        {
          name: '大厂专家',
          value: 5
        }
      ],
      words: [
        {
          name: '区块链',
          value: 810
        },
        {
          name: '云计算',
          value: 520
        },
        {
          name: '人工智能',
          value: 928
        },
        {
          name: '大数据',
          value: 906
        },
        {
          name: '工业互联网',
          value: 825
        },
        {
          name: '医疗',
          value: 514
        },
        {
          name: '质量溯源',
          value: 486
        },
        {
          name: '政务',
          value: 53
        },
        {
          name: '密码学',
          value: 927
        },
        {
          name: '金融行业',
          value: 1308
        },
        {
          name: '供应链',
          value: 693
        },
        {
          name: '公有链',
          value: 611
        },
        {
          name: '私有链',
          value: 512
        },
        {
          name: '联盟链',
          value: 382
        },
        {
          name: '数据共享',
          value: 312
        },
        {
          name: '文创版权',
          value: 187
        },
        {
          name: '天河链',
          value: 163
        },
        {
          name: '数据存证',
          value: 104
        },
        {
          name: 'UDFS存储',
          value: 3
        },
        {
          name: '在线教育',
          value: 31
        },
        {
          name: '关联分析',
          value: 941
        },
        {
          name: '智慧停车',
          value: 585
        },
        {
          name: '链云生态',
          value: 473
        },
        {
          name: '应用层',
          value: 358
        },
        {
          name: '网络层',
          value: 246
        },
        {
          name: '数据层',
          value: 207
        },
        {
          name: '基础层',
          value: 194
        },
        {
          name: '智能合约',
          value: 104
        },
        {
          name: '去中心化',
          value: 87
        },
        {
          name: '数字货币',
          value: 415
        },
        {
          name: '酷屏',
          value: 253
        },
        {
          name: '可视化',
          value: 211
        },
        {
          name: 'P2P',
          value: 116
        },
        {
          name: '数据挖掘',
          value: 1309
        }
      ],
      business: {
        legend: '',
        x: [[1500, 1200, 900, 600, 400, 300, 100]],
        y: [
          [
            '金融行业',
            '电子政务',
            '文创版权',
            '教育行业',
            '智慧停车',
            '医疗互联',
            '物流行业'
          ]
        ]
      },
      incomes: {
        legend: '',
        x: [['2015', '2016', '2017', '2018', '2019', '2020']],
        y: [[555, 896, 1935, 2922, 4508, 5000]]
      },
      times: ['2017', '2018', '2019', '2020'],
      contents: [
        ['2017.10，公司成立,好开心'],
        ['2018.03，公司融资，好开心', '2018.03，公司上市，好开心'],
        ['2019.03，开子公司，好开心'],
        ['2020.05，起朱楼，宴宾客', '2020.06，楼塌了']
      ],
      mapData: [
        [
          '厦门',
          [
            [{ name: '厦门' }, { name: '北京', value: 100 }],
            [{ name: '厦门' }, { name: '上海', value: 100 }],
            [{ name: '厦门' }, { name: '广州', value: 100 }],
            [{ name: '厦门' }, { name: '深圳', value: 100 }],
            [{ name: '厦门' }, { name: '西安', value: 100 }]
          ]
        ],
        [
          '赣州',
          [
            [{ name: '赣州' }, { name: '西宁', value: 100 }],
            [{ name: '赣州' }, { name: '拉萨', value: 100 }],
            [{ name: '赣州' }, { name: '哈尔滨', value: 100 }],
            [{ name: '赣州' }, { name: '成都', value: 100 }],
            [{ name: '赣州' }, { name: '重庆', value: 100 }]
          ]
        ],
        [
          '北京',
          [
            [{ name: '北京' }, { name: '西宁', value: 100 }],
            [{ name: '北京' }, { name: '拉萨', value: 100 }],
            [{ name: '北京' }, { name: '哈尔滨', value: 100 }],
            [{ name: '北京' }, { name: '成都', value: 100 }],
            [{ name: '北京' }, { name: '重庆', value: 100 }]
          ]
        ]
      ]
    }
  },

  components: {
    countTo,
    horizontalBar,
    pie,
    curLine,
    cloudWord,
    blockPie,
    devHistory,
    assetsMap
  },
  created() {
    this.queryTemp()
    this.timer = setInterval(() => {
      this.setTime()
    }, 1000)
  },
  beforeDestroy() {
    this.timer && clearInterval(this.timer)
  },
  computed: {},

  mounted() {},

  methods: {
    setTime() {
      let [date, week, time] = dateFormat(
        new Date(),
        'yyyy-MM-dd EEE HH:mm:ss'
      ).split(' ')
      this.date = date
      this.week = week
      this.nowTime = time
    },
    queryTemp() {
      axios
        .get('https://www.tianqiapi.com/api/', {
          params: {
            appid: '26148275',
            appsecret: '2id6H48Y',
            version: 'v6'
          }
        })
        .then(res => {
          this.weatcherData = res.data
          this.imgSrc = this.selectPic(res.data.wea_img)
        })
    },
    selectPic(type) {
      const typeMap = {
        xue: require('../assets/img/brand/xue.png'),
        yin: require('../assets/img/brand/yin.png'),
        yu: require('../assets/img/brand/yu.png'),
        bingbao: require('../assets/img/brand/yu.png'),
        yun: require('../assets/img/brand/yun.png'),
        wu: require('../assets/img/brand/wu.png'),
        shachen: require('../assets/img/brand/shachen.png'),
        lei: require('../assets/img/brand/lei.png'),
        qing: require('../assets/img/brand/qing.png')
      }
      return typeMap[type]
    }
  }
}
</script>
